/* Tailwind Elements: modals.css */

@layer components {
	/* === Modal (helpers) === */

	.w-modal-slim {
		@apply w-full max-w-[400px];
	}

	.w-modal {
		@apply w-full max-w-[640px];
	}

	.w-modal-wide {
		@apply w-full max-w-[80%];
	}

	/* Provides initial focus selection styles on opening the modal */
	.modal *:focus:not([tabindex='-1']):not(.input):not(.textarea):not(.select):not(.input-group):not(.input-group input) {
		outline-style: auto;
		@apply outline-[-webkit-focus-ring-color];
	}
}
